<template>
  <div class="login">
    <img
      src="	https://p1.meituan.net/travelcube/86c5b686264c3cda292c30f623970f955983.png"
      alt=""
    />
    <van-form @submit="onSubmit">
      <van-cell-group v-if="flag" inset>
        <van-field
          v-model="adminname"
          name="adminname"
          placeholder="请输入正确的手机号"
          :rules="[
            { required: true, message: '请填写用户名', validate: telValidator }
          ]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[
            {
              required: true,
              message: '请输入正确的密码',
              validate: passwordValidator
            }
          ]"
        />
      </van-cell-group>
      <van-cell-group v-else inset>
        <van-field
          v-model="adminname"
          name="adminname"
          placeholder="请输入正确的手机号"
          :rules="[
            { required: true, message: '请填写用户名', validate: telValidator }
          ]"
        />
        <van-field
          v-model="password"
          name="password"
          placeholder="请输入验证码"
          :rules="[
            {
              required: true,
              message: '请输入正确的验证码',
              validate: passwordValidator
            }
          ]"
        >
        </van-field>
        <button class="telPass" @click="Num">
          {{ verify }}
        </button>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
      <van-field name="radio">
        <template #input>
          <van-radio-group direction="horizontal">
            <van-radio name="1" checked
              >我已i阅读并同意
              <a href="https://rules-center.meituan.com/m/detail/guize/4"
                >《美团用户协议》</a
              >、
              <a href="https://rules-center.meituan.com/m/detail/guize/2"
                >《隐私政策》</a
              >，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理"==$0</van-radio
            >
          </van-radio-group>
        </template>
      </van-field>
    </van-form>
    <p class="cut" @click="cutLogin">
      {{ flag ? '手机号验证码登录' : '账号登录' }}
    </p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import { Toast } from 'vant'
import 'vant/es/toast/style'
// import { mapMutations } from 'vuex'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    let flag = ref(true)
    let verify = ref('获取验证码')
    let num = ref(10) //验证码倒计时
    let timer = ref('')
    let adminname = ref('')
    let password = ref('')
    const store = useStore() //vuex的相关方法
    const router = useRouter() //路由router
    function Num() {
      //验证码倒计时
      clearInterval(timer.value)
      timer.value = setInterval(() => {
        verify.value = num.value + 's'
        num.value--
        if (num.value === 0) {
          verify.value = '获取验证码'
          clearInterval(timer.value)
          num.value = 10
        }
      }, 1000)
    }
    function cutLogin() {
      //登录切换
      flag.value = !flag.value
      adminname.value = ''
      password.value = ''
    }
    function onSubmit(values) {
      console.log('values....', values)
      if (flag.value) {
        axios({
          url: 'http://localhost:5000/users',
          method: 'get',
          params: {
            adminname: values.adminname,
            password: values.password
          }
        }).then(() => {
          store.commit('homeData/getLoginData', {
            adminname: values.adminname,
            password: values.password
          })
          router.push({ name: 'home' })
          localStorage.setItem('adminname', values.adminname)
          Toast.success('登录成功')
        })
      } else {
        axios({
          url: 'http://localhost:5000/users',
          method: 'post',
          data: {
            adminname: values.adminname,
            password: values.password
          }
        }).then(() => {
          store.commit('homeData/getLoginData', {
            adminname: values.adminname,
            password: values.password
          })
          router.push({ name: 'home' })
          localStorage.setItem('adminname', values.adminname)
          Toast.success('登录成功')
        })
      }
    }
    function telValidator() {
      let reg = /^1+[4-9]+\d{9}$/
      return reg.test(adminname.value)
    }
    function passwordValidator() {
      let reg = /^\w{4,16}$/
      return reg.test(password.value)
    }
    return {
      flag,
      verify,
      num,
      timer,
      adminname,
      password,
      Num,
      cutLogin,
      onSubmit,
      telValidator,
      passwordValidator
    }
  }
})
</script>

<style lang="scss" scoped>
#app {
  font-size: 0.16rem;
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 0.3rem;
  img {
    margin: 0.2rem 0 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
  }
}
.van-form {
  width: 100%;
}
.van-cell-group {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  .van-field {
    border-bottom: 1px solid #ccc;
    font-size: 0.16rem;
    position: relative;
  }
  .telPass {
    position: absolute;
    top: 1rem;
    right: 0.1rem;
    border: none;
    background: #fff;
    height: 0.3rem;
    width: 0.9rem;
  }
}
.van-cell {
  font-size: 0.12rem;
  margin-top: 0.2rem;
}
div {
  .van-button {
    margin-top: 0.2rem;
    width: 100%;
    height: 0.5rem;
    background: #ffe77b;
    border: none;
    font-size: 0.18rem;
    color: #000;
  }
}
.cut {
  position: fixed;
  bottom: 1rem;
}
</style>
